import React, { Component } from 'react'
import {connect} from 'react-redux'
import {lookRoom} from './actionCreators'
// import {fun} from './actionCreators'
// import {addClass} from './actionCreators'
import Head from './Head'
import './classroom.css'
import UploadClass from './UploadClass'

class Classroom extends Component {
    constructor(props){
        super()
    }
    render() {
        // this.props.room.map((item)=>console.log(item))
        console.log(this.props.room)
        let i=0
        return (
            <div>
                <Head />
                <div style={{marginLeft:'20%',marginTop:'10px',fontSize:'18px'}}>教室课程详情</div>
                <div className='addstu'>
                    <div className='newAdd'>新增课程</div>
                    <form id = "class" action="" method="post">
                        <span>教室:</span>
                        {/* <input className='txt' type='text' name='Cno'/> */}
                        <select name="Cno" id="no">
                            <option value=""></option>
                            <option value="C204">C204</option>
                            <option value="C206">C206</option>
                            <option value="C302">C302</option>
                            <option value="C304">C304</option>
                            <option value="C306">C306</option>
                            <option value="C402">C402</option>
                            <option value="C406">C406</option>
                            <option value="A505">A505</option>

                        </select>

                        <span>课程:</span><input className='txt' type='text' name='Coursename'/>
                        <span>星期:</span>
                        <select name="Day" id="day">
                            <option value=""></option>
                            <option value="Monday">星期一</option>
                            <option value="Tuesday">星期二</option>
                            <option value="Wednesday">星期三</option>
                            <option value="Thursday">星期四</option>
                            <option value="Friday">星期五</option>
                            <option value="Saturday">星期六</option>
                            <option value="Sunday">星期日</option>
                        </select> 
                        <span>开始时间:</span><input type='time' name='Start'/>
                        <span>结束时间:</span><input type='time' name='Endtime'/>
                    </form>
                    <button
                        className='add'
                        onClick={(adds)=>{
                            let clas=document.getElementById('class');
                            let Cno=document.getElementById('no').value
                            let Day=document.getElementById('day').value
                            let Coursename=clas.Coursename.value;
                            let Start=clas.Start.value;
                            let Endtime=clas.Endtime.value;
                            console.log(Cno,Day)
                            adds={type:'adds',classroom:Cno,Coursename:Coursename,Day:Day,Start:Start,Endtime:Endtime}
                                                            
                            this.props.dispatch(lookRoom(adds))
                            setTimeout(()=>{
                                // this.props.history.go(0);
                                alert('添加成功')

                            },1000)
                        }}>
                            添加
                    </button>
                </div>
                <div>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C204'}))}}>C204</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C206'}))}}>C206</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C302'}))}}>C302</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C304'}))}}>C304</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C306'}))}}>C306</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C402'}))}}>C402</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C404'}))}}>C404</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'C406'}))}}>C406</button>
                    <button className='room' onClick={()=>{this.props.dispatch(lookRoom({classroom:'A505'}))}}>A505</button>
                </div>
                <UploadClass />
                <table  className='showTable' border='1' cellspacing='0'>
                    <tr>
                        <th>排序</th>
                        <th>教室</th>
                        <th className='course'>课程</th>
                        <th>星期</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>操作</th>

                    </tr>
                    {this.props.room.map((item)=>{
                        // console.log(item)
                        return item.map((items)=>{
                            items.Start=items.Start+''
                            items.Endtime=items.Endtime+''
                            console.log(items.Start)
                            switch(items.Day){
                                case 'Monday':
                                    items.Day='星期一'
                                    break
                                case 'Tuesday':
                                    items.Day='星期二'
                                    break
                                case 'Wednesday':
                                    items.Day='星期三'
                                    break
                                case 'Thursday':
                                    items.Day='星期四'
                                    break
                                case 'Friday':
                                    items.Day='星期五'
                                    break
                                case 'Saturday':
                                    items.Day='星期六'
                                    break
                                case 'Sunday':
                                    items.Day='星期日'
                                    break
                            }
                            return <tr>
                            <td>{++i}</td>
                            <td>{items.Cno}</td>
                            <td className='course'>{items.Coursename}</td>
                            <td>{items.Day}</td>
                            <td>{items.Start.slice(0,items.Start.length-2)+':'+ items.Start.slice(-2)}</td>
                            <td>{items.Endtime.slice(0,items.Endtime.length-2)+':'+ items.Endtime.slice(-2)}</td>
                            <button
                            className='del'
                            onClick={()=>{
                                
                                // let Sno=item.Sno;
                                
                                this.props.dispatch(lookRoom({type:'delf',classroom:items.Cno,Coursename:items.Coursename,Day:items.Day,Start:items.Start,Endtime:items.Endtime}))
                                setTimeout(()=>{
                                    // this.props.history.go(0);
                                    // alert('删除成功');
                                },1000)
                            }}
                            >删除</button>
                        </tr>
                        })
                            
                    })}
                </table>

            </div>
        )
    }
}
const mapStateToProps=(state)=>({
    room:state.room.room,
}); 

export default  connect(mapStateToProps)(Classroom);